<template>
  <div class="divWarehouseAdd">
    <div class="divForm">
      <el-form
        :model="form"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        v-loading="loading"
      >
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item
              label="仓库编码"
              prop="code"
            >
              <el-input
                v-model="form.code"
                placeholder="请输入"
                clearable
                disabled="disabled"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="仓库名称"
              prop="name"
            >
              <el-input
                v-model="form.name"
                placeholder="请输入"
                clearable
                maxlength="10"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="仓库类型"
              prop="type"
            >
              <el-select
                v-model="form.type"
                placeholder="请选择"
                style="width: 100%"
                clearable
              >
                <el-option
                  v-for="item in warehouseTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="16">
            <el-form-item
              label="省/市/区"
              prop="location"
            >
              <el-cascader
                v-model="form.location"
                :options="locationOptions"
                :props="{ expandTrigger: 'hover' }"
                clearable
                style="width: 100%"
              >
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8"></el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="16">
            <el-form-item
              label="详细地址"
              prop="address"
            >
              <el-input
                v-model="form.address"
                placeholder="请输入"
                clearable
                maxlength="50"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="仓库状态"
              prop="status"
            >
              <el-radio-group v-model="form.status">
                <el-radio label="1">启用</el-radio>
                <el-radio label="0">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item
              label="仓库面积"
              prop="surface"
              class="formInfoTip"
            >
              <el-input
                v-model.number="form.surface"
                placeholder="请输入"
                clearable
                type="number"
                @change="handleBlur"
              ><span slot="append">m³</span></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="负责人"
              prop="personName"
            >
              <el-input
                v-model="form.personName"
                placeholder="请输入"
                clearable
                maxlength="10"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="联系电话"
              prop="phone"
            >
              <el-input
                v-model="form.phone"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="buttonBox" >
      <base-button
        class="unimportanceButton"
        @click="btnReturnClick"
      >返回</base-button>
      <base-button
        class="minorImportantButton"
        @click="btnSaveClick"
      >提交</base-button>
    </div>
  </div>
</template>
<script lang="ts">
import { mixins } from 'vue-class-component'
import { Component } from 'vue-property-decorator'
import BaseButton from '@/components/base-button/index.vue'
import {
  warehouseTypeSelectOptions,
  getChinaCascaderData
} from '@/utils/common-select-data'
import {
  ICascaderEntity,
  ICommonReturn,
  ICommonSelectOptionsString
} from '@/utils/common-interface'
import { generateWarehouseCode } from '@/api/common-api'
import {
  findOneWarehouse,
  addWarehouse,
  updateWarehouse
} from '@/module-base/api/warehouse-add'
import { ElForm } from 'element-ui/types/form'
import { getLocationData } from '@/utils/common-utils'
import SinglePage from '@/mixin/single-page'
import { validatePhone, validateValidity } from '@/utils/validate'

@Component({
  name: 'WarehouseAdd',
  components: {
    BaseButton
  }
})
export default class extends mixins(SinglePage) {
  private form = {
    code: '',
    name: '',
    status: '1',
    location: [] as string[],
    address: '',
    surface: null,
    personName: '',
    phone: '',
    type: '',
    province: '',
    city: '',
    area: ''
  }

  private rules = {
    name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
    type: [{ required: true, message: '请选择仓库类型', trigger: 'change' }],
    location: [{ required: true, message: '请选择区域', trigger: 'change' }],
    status: [{ required: true, message: '请选择仓库状态', trigger: 'change' }],
    phone: [{ required: false, validator: validatePhone, trigger: 'blur' }],
    personName: [{ required: true, message: '请输入负责人', trigger: 'blur' }]
  }

  private warehouseTypeOptions: ICommonSelectOptionsString[] = []

  private locationOptions: ICascaderEntity[] = []

  private loading = false

  mounted() {
    this.initData()
  }

  private async initData() {
    this.warehouseTypeOptions = warehouseTypeSelectOptions
    this.locationOptions = getChinaCascaderData()
    const id = this.$route.params.id
    if (id === 'null') {
      // 新增操作
      const { data } = await generateWarehouseCode('CK')
      this.form.code = data
    } else {
      // 修改操作
      this.loading = true
      const { data } = await findOneWarehouse(id)
      this.form = {
        ...data,
        location: [data.province, data.city, data.area],
        status: String(data.status)
      }
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }

  private btnSaveClick() {
    (this.$refs.ruleForm as ElForm).validate(async(valid: boolean) => {
      if (valid) {
        const form = this.form
        const params = {
          ...form,
          location: getLocationData(form.location.join('/')),
          province: form.location[0],
          city: form.location[1],
          area: form.location[2]
        }
        let data: ICommonReturn
        if (this.$route.params.id === 'null') {
          // 新增操作
          data = ((await addWarehouse(params)) as unknown) as ICommonReturn
        } else {
          data = ((await updateWarehouse(params)) as unknown) as ICommonReturn
        }
        if (data.code === 0) {
          this.$message({
            showClose: true,
            message: '恭喜你，提交成功！',
            type: 'success'
          })
          this.closeWindow()
        } else {
          this.$message({
            showClose: true,
            message: data.msg,
            type: 'error'
          })
        }
      } else {
        return false
      }
    })
  }

  private btnReturnClick() {
    this.$router.go(-1)
  }

  handleBlur(newVal: any) {
    const error = this.$message
    this.form.surface = validateValidity(newVal, error)
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
<style lang="scss">
.divWarehouseAdd {
  .el-form {
    .el-form-item__content {
      margin-left: 0 !important;
    }
    .el-radio-group {
      width: 100%;
    }
  }
}
</style>
